<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WIFI配网</title>
</head>

<body>
    <div class="main">
        <h2>WIFI配网</h2>
        <br>
        <input class="input ssid" type="text" placeholder="SSID" name="ssid">
        <input class="input password" type="password" placeholder="密码" name="password">
        <input class="input targetip" type="text" placeholder="目标IP或URL" name="targetip">
        <input class="input targetport" type="text" placeholder="目标端口" name="targetport">
        <button class="button" onclick="sendData()">配置</button>
    </div>
</body>
<script>
    function sendData() {
        let ssid = document.querySelector(".ssid").value
        let password = document.querySelector(".password").value
        let targetip = document.querySelector(".targetip").value
        let targetport = document.querySelector(".targetport").value
        if (ssid == "" || password == "") {
            return
        }
        console.log(ssid, password)
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
            if (this.readyState == 4 && this.status == 200) {
                console.log("配置成功")
                alert("配置成功");
            }
        };
        xhttp.open("GET", "set?ssid=" + ssid + "&password=" + password + "&targetip=" + targetip + "&targetport=" + targetport, true);
        xhttp.send();
    }
</script>
<style>
    html,
    body {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }
    
    .main {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    
    .button {
        outline: none;
        box-sizing: border-box;
        background: #f5f5f5;
        border: 1px solid#bdbdbd;
        border-radius: 18px;
        color: #434343;
        cursor: pointer;
        display: block;
        font-family: inherit;
        font-size: 16px;
        font-variant: normal;
        font-weight: 400;
        height: 2.14285714em;
        line-height: 1.42857143;
        margin: 18px auto;
        padding: 4px 30px;
        text-decoration: none;
        white-space: nowrap;
    }
    
    .input {
        resize: none;
        outline: none;
        margin: 4px auto;
        height: 45px;
        width: 80%;
        border: 1px solid #d0d1ce;
        padding-left: 15px;
        font-size: 14px;
        color: #000;
        margin-left: 10px;
        border-radius: 10px;
        border: 1px solid #dcdfe6;
        background-color: #fff;
    }
</style>

</html>